<template>
  <div id="app">
    <div id="_j_mfw_focus" class="mfw-focus">
      <div class="show-slider" style="height: 450px;">
        <ul class="show-image">
          <li
            :data-id="index"
            class="show_image first an"
            v-for="(item, index) in showImageList"
            :key="index"
            :style="{ display: imgIndex === index ? 'list-item' : 'none' }"
          >
            <a
              href="javascript:void(0);"
              class="show-pic"
            >
              <img :src="item.img" />
            </a>
            <a href="javascript:void(0);" class="show-title dark">
              <div class="date">
                <span class="day">{{ item.day }}</span>
                {{ item.date }}
              </div>
              <h3>{{ item.title }}</h3>
            </a>
          </li>
        </ul>

        <ul class="show-nav">
          <li
            :class="['show_nav', imgIndex === index ? 'active' : null]"
            v-for="(item, index) in showNavList"
            v-bind:key="index"
            @click="changeImg(index)"
          >
            <a href="javascript:">
              <img :src="item.img" height="62" width="110" />
              <span></span>
            </a>
          </li>
        </ul>

        <a  href="javascript:void(0);" class="show-more">
          历历在目
        </a>
      </div>

      <div id="_j_index_search" class="search-container">
        <div class="search-group">
          <div id="_j_index_search_tab" class="searchtab">
            <ul class="clearfix">
              <li data-index="-1" class="tab-selected">
                <i></i>
                全部
              </li>
              <li data-index="0">
                <i></i>
                目的地
              </li>
              <li data-index="1">
                <i></i>
                攻略
              </li>
              <li data-index="2">
                <i></i>
                游记
              </li>
              <li data-index="3">
                <i></i>
                找人
              </li>
            </ul>
          </div>
          <div id="_j_index_search_bar_all" class="searchbar">
            <div class="search-wrapper">
              <div class="search-input">
                <input
                  name="keyword"
                  id="keyword"
                  type="text"
                  placeholder="搜目的地/攻略/游记/用户"
                  autocomplete="off"
                />
              </div>
            </div>
            <div id="_j_index_search_btn_all" class="search-button">
              <a role="button" href="javascript:">
                <i class="icon-search"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mfw-container clearfix">
      <div class="sales-entrys-container clearfix">
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-sales">
          <div class="sales-entrys-title">
            自由行
          </div>
          <div class="sales-entrys-subtitle">
            旅行就要freestyle
          </div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-group">
          <div class="sales-entrys-title">
            跟团游
          </div>
          <div class="sales-entrys-subtitle">
            省心省力 行程透明
          </div>
        </a>
        <a
          href="javascript:void(0);"
          class="sales-entrys-item entrys-bg-localdeals"
        >
          <div class="sales-entrys-title">
            当地游
          </div>
          <div class="sales-entrys-subtitle">
            最地道的玩法体验
          </div>
        </a>
        <a
          href="javascript:void(0);"
          class="sales-entrys-item entrys-bg-flight"
        >
          <div class="sales-entrys-title">
            机票
          </div>
          <div class="sales-entrys-subtitle">
            特惠一折起
          </div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-visa">
          <div class="sales-entrys-title">
            签证
          </div>
          <div class="sales-entrys-subtitle">
            服务优质 出签率高
          </div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-ship">
          <div class="sales-entrys-title">
            邮轮
          </div>
          <div class="sales-entrys-subtitle">
            移动的海上城堡
          </div>
        </a>
      </div>

      <div class="mfw-wrapper">
        <div class="mfw-travelnotes">
          <div class="navbar clearfix">
            <ul id="_j_tn_nav" class="tn-nav">
              <li
                :class="[
                  '_j_gs_tab',
                  'tn-nav-hot',
                  travelShow ? 'active' : null,
                ]"
                @click="changeTravelShow(1)"
              >
                <a href="javascript:void(0);">热门游记</a>
              </li>
              <li
                :class="[
                  '_j_gs_tab',
                  'tn-nav-new',
                  travelShow ? null : 'active',
                ]"
                @click="changeTravelShow(2)"
              >
                <a href="javascript:void(0);">最新发表</a>
              </li>
            </ul>
            <div class="tn-write">
              <a href="javascript:void(0);" class="btn-add">
                <i></i>
                写游记
              </a>
            </div>
          </div>

          <div class="pagelet-block">
            <form method="post" id="searchForm">
              <input type="hidden" name="orderType" value="1" id="orderType" />
              <div id="_j_tn_content">
                <div class="tn-list">
                  <div
                    class="tn-item clearfix"
                    v-for="(item) in hotTravelsList"
                    :key="item.id"
                    @click="$router.push(`travelDetail?id=${item.id}`)"
                  >
                    <div class="tn-image">
                      <a href="javascript:void(0);" >
                        <img :src="item.coverUrl" style="display: inline;" />
                      </a>
                    </div>
                    <div class="tn-wrapper">
                      <dl>
                        <dt>
                          <a
                            href="javascript:void(0);"
                          >
                            {{ item.title }}
                          </a>
                        </dt>
                        <dd>
                          <a
                            style="display: block; height: 80px;"
                            href="javascript:void(0);"
                            
                          >
                            {{ item.summary }}
                          </a>
                        </dd>
                      </dl>
                      <div class="tn-extra">
                        <span class="tn-ding">
                          <a
                            href="javascript:void(0);"
                            data-japp="articleding"
                            data-iid="12451790"
                            data-vote="2157"
                            rel="nofollow"
                            class="btn-ding"
                          ></a>
                          <em id="topvote12451790">{{ item.thumbsupnum }}</em>
                        </span>
                        <span class="tn-place">
                          <i></i>
                          <a
                            href="javascript:void(0);"
                            rel="nofollow"
                            class="_j_gs_item"
                          >
                            {{ item.destName }}
                          </a>
                          ，by
                        </span>
                        <span class="tn-user">
                          <a
                            href="javascript:void(0);"
                            
                            rel="nofollow"
                          >
                            <img :src="item.author.headImgUrl" />
                            {{ item.author.nickname }}
                          </a>
                        </span>
                        <span class="tn-nums">
                          <i></i>
                          {{ item.viewnum }}/{{ item.replynum }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <br />
                <br />
                <div style="float: right;">
                  <div style="float: left;">
                    <span style="line-height: 30px;">
                      共{{ totalPages }}页 /
                      {{ totalElements }}条&nbsp;&nbsp;&nbsp;
                    </span>
                  </div>
                  <div
                    id="pagination"
                    class="jq-pagination"
                    style="display: inline;"
                  >
                    <a
                      class="prev disabled"
                      href="javascript:void(0);"
                      jp-role="prev"
                      jp-data="0"
                    >
                      上一页
                    </a>
                    <a
                      href="javascript:void(0);"
                      jp-role="page"
                      jp-data="1"
                      class="active"
                    >
                      1
                    </a>
                    <a href="javascript:void(0);" jp-role="page" jp-data="2">
                      2
                    </a>
                    <a
                      class="next"
                      href="javascript:void(0);"
                      jp-role="next"
                      jp-data="2"
                    >
                      下一页
                    </a>
                    <a
                      class="last"
                      href="javascript:void(0);"
                      jp-role="last"
                      jp-data="2"
                    >
                      尾页
                    </a>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="mfw-aside">
        <div class="asidebox safety-prevention">
          <a
            href="javascript:void(0);"
            style="display: block; margin-top: 5px;"
          >
            <img
              src="../../public/img/index-link.png"
              width="218"
              height="31"
            />
          </a>
        </div>
        <div class="asidebox box-gonglve">
          <div class="asidebox-hd">
            <h2 class="hd-title">旅游攻略推荐</h2>
            <a href="./strategy_index.html" class="hd-right">更多</a>
          </div>
          <div class="asidebox-bd">
            <div class="gonglve-item">
              <div class="img">
                <a href="javascript:void(0);">
                  <img
                    width="200px"
                    src="../../public/img/wKgE2l0chlCATLEFAA8R6jYHC0U155.jpg"
                  />
                  <span class="mark">自由行攻略</span>
                </a>
              </div>
              <h3><a href="javascript:void(0);">广州长隆野生动物园</a></h3>
            </div>
          </div>
        </div>
        <div class="m-hotsale">
          <h3 class="hd">本周热卖</h3>
          <ul>
            <li>
              <a href="javascript:void(0);" >
                <span class="image">
                  <img
                    src="../../public/img/wKgIC1xOo6iAS0mlABAmBVFn6AA539.gif"
                    height="70"
                    width="100"
                  />
                </span>

                <div
                  title="最高立减800·上海飞马尔代夫鲁滨逊努努岛7天蜜月自由行（一价全包+私人泳池+儿童吃住优惠+婚纱摄影+可预订奥静/努努岛/中央格兰宁/康迪玛）"
                  class="title"
                >
                  最高立减800·上海飞马尔代夫鲁滨逊努努...
                </div>
                <span class="price">¥11880起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" >
                <span class="image">
                  <img
                    src="../../public/img/wKgED1vzqwOAAsFFAAL1lFyHgLg47.jpeg"
                    height="70"
                    width="100"
                  />
                </span>

                <div
                  title="【五月美食节】上海出发塞班岛6天5晚自由行(早鸟优惠最高减500元+金卡会员立减500元+赠环岛游+军舰岛+接送机+可升级丛林探险+双重套餐不同选择+含税费1550元+导游小费+中文接送机 )"
                  class="title"
                >
                  【五月美食节】上海出发塞班岛6天5晚自...
                </div>
                <span class="price">¥3180起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" >
                <span class="image">
                  <img
                    src="../../public/img/wKgBEFsscoCAVoO2AAOWOCBnxfs33.jpeg"
                    height="70"
                    width="100"
                  />
                </span>

                <div
                  title="ins网红拍照圣地·上海直飞美娜多5天自由行(网红无边泳池+布纳肯海龟合照+可考潜水证+深潜教学+追海豚+滑翔伞)"
                  class="title"
                >
                  ins网红拍照圣地·上海直飞美娜多5天自...
                </div>
                <span class="price">¥3280起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" >
                <span class="image">
                  <img
                    src="../../public/img/wKgED1uQ-eOAMAiMAAU0ehvmPqA28.jpeg"
                    height="70"
                    width="100"
                  />
                </span>

                <div
                  title="金卡最高立减500+畅享一价全包·上海往返马尔代夫鲁滨逊努努岛7天5晚自由行（水屋带私人泳池+精彩晚会DJ表演+全天托儿服务+锦鲤免费升级房型/水飞上岛+可订库拉玛提岛/阿玛瑞/波杜希蒂岛/神仙珊瑚岛/奥臻岛/芙花芬岛/莫凡彼岛/尼亚玛/奥静岛）"
                  class="title"
                >
                  金卡最高立减500+畅享一价全包·上海往...
                </div>
                <span class="price">¥10680起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" >
                <span class="image">
                  <img
                    src="../../public/img/wKgED1xFn0SAXJ-1AAKOKgZepzM541.png"
                    height="70"
                    width="100"
                  />
                </span>

                <div
                  title="北京直飞普吉岛7天自由行（端午/暑期惊喜优惠+最高立减968元+家庭/蜜月同款+屋顶/星光泳池+网红酒店/轻奢别墅任意搭+可定制曼谷/清迈多地连线+赠电话卡/VIP接送机/旅游保险）"
                  class="title"
                >
                  北京直飞普吉岛7天自由行（端午/暑期惊...
                </div>
                <span class="price">¥3250起</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ApiQuery } from '@/utils/api'

export default {
  data() {
    return {
      // 当前图片的下标
      imgIndex: 1,

      // 计时器
      t: null,

      showImageList: [
        {
          title: '格鲁吉亚：与它爱恨纠葛，犹述一书武侠情愁。来饮壶好酒？',
          date: '/Oct.2020',
          day: '15',
          img: require('../../public/img/wKgE2l0czFWAZCSiAAes8lIsP3I057.jpg'),
        },
        {
          title:
            ' 港式文艺漫步地图，想对你说一万遍“我可以”（书店、美食、景观大搜罗）',
          date: '/Oct.2020',
          day: '15',
          img: require('../../public/img/wKgE2l0bAz-AUqLVAAgd7dbvAMg911.jpg'),
        },
        {
          title: '地道乐山人带你吃遍心中List（内含早、中、晚、宵夜攻略）',
          date: '/Oct.2020',
          day: '15',
          img: require('../../public/img/wKgE2l0aFHOAQTIqAAbVLgQTk8Q355.jpg'),
        },
        {
          title: '追鲸的日子啊，那是一段云上的时光',
          date: '/Oct.2020',
          day: '15',
          img: require('../../public/img/wKgE2l0VoBaAavyDAALOJmkn3QE534.jpg'),
        },
        {
          title: '游走在《请回答1988》的韩国｜首尔、议政府、仁川的寻寻觅觅',
          date: '/Oct.2020',
          day: '15',
          img: require('../../public/img/wKgE2l0VxGSAFPg0AAVbWqeaXt4000.jpg'),
        },
      ],
      showNavList: [
        { img: require('../../public/img/wKgE2l0czFWAZCSiAAes8lIsP3I057.jpg') },
        {
          img: require('../../public/img/wKgE2l0bAz-AUqLVAAgd7dbvAMg911.jpg'),
        },
        {
          img: require('../../public/img/wKgE2l0aFHOAQTIqAAbVLgQTk8Q355.jpg'),
        },
        {
          img: require('../../public/img/wKgE2l0VoBaAavyDAALOJmkn3QE534.jpg'),
        },
        {
          img: require('../../public/img/wKgE2l0VxGSAFPg0AAVbWqeaXt4000.jpg'),
        },
      ],

      // 热门游记
      hotTravelsList: [],

      //总页数
      totalPages: 0,

      // 总条数
      totalElements: 0,

      //   控制热门与最新
      travelShow: true,
    }
  },

  created() {
    this.getData(1)
  },

  mounted() {
    this.timeChangeImg()
  },

  methods: {
    // 游记列表数据请求
    async getData(val) {
      let { data: res } = await ApiQuery({ orderType: val, currentPage: 1 })
      if (res.code !== 200) return alert('数据请求失败！')
      this.hotTravelsList = res.data.content
      this.totalPages = res.data.totalPages
      this.totalElements = res.data.totalElements
      console.log(res)
    },

    // 点击切换大图
    changeImg(index) {
      console.log(index)
      this.imgIndex = index
    },

    // 循环动图
    timeChangeImg() {
      this.t = setInterval(() => {
        this.imgIndex = this.imgIndex + 1
        if (this.imgIndex > this.showNavList.length - 1) {
          this.imgIndex = 0
        }
        // setTimeout(this.t)
      }, 3000)
    },

    // 修改热门与最新列表
    changeTravelShow(val) {
      if (val === 1) {
        this.travelShow = true
        setTimeout(() => {
          this.getData(1)
        }, 500)
      } else {
        this.travelShow = false
        setTimeout(() => {
          this.getData(2)
        }, 500)
      }
    },
  },
}
</script>

<style scoped>
@import '../css/index.css';
@import '../css/jqPagination.css';
.an {
  animation: identifier 2s ease;
}

@keyframes identifier {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
